<template>
  <div class="details">
    <!-- 标题 -->
    <van-nav-bar
      title="动态"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-skeleton
      title
      avatar
      :row="3"
      :loading="jiazai"
    >
      <!-- 发布动态用户 -->
      <van-row
        v-if="this.message !=''"
        class="user"
      >
        <van-col
          span="3"
          :offset="1"
        >
          <van-image
            width="1.2rem"
            height="1.2rem"
            :src="'apis/kuan_api/photo/'+message.user_img"
            round
            style="border:1px solid lightgray"
            @click="look(message.user_id)"
          />
        </van-col>
        <van-col span="14">
          <p class="nick"><b>{{message.user_nickname}}</b></p>
          <p
            class="nick"
            style="color:lightgray"
          >{{message.AddTime}}</p>
        </van-col>
        <van-col
          span="6"
          v-if="$store.state.user.user_id!=message.user_id"
        >
          <van-button
            v-if="this.isattention"
            type="default"
            round
            class="btn_att"
            @click="Isattention"
          >已关注</van-button>
          <van-button
            v-else
            type="primary"
            round
            class="btn"
            @click="Isattention"
          >关注</van-button>
        </van-col>
      </van-row>
      <!-- 动态内容 -->
      <div class="content">
        <p class="message">
          {{message.message}}
        </p>
        <div v-if="message.img!=null">
          <van-image
            :src="'apis/kuan_api/img/'+message.img"
            v-if="message.img.search('.mp4')==-1"
          />
          <video
            width="320"
            height="240"
            controls
            v-if="message.img.search('.mp4')!=-1"
          >
            <source
              :src="'apis/kuan_api/img/'+message.img"
              type="video/mp4"
            >
          </video>
        </div>

        <!-- 模块标签 -->
        <div>
          <van-tag
            style="height:0.8rem"
            @click="tomodule(message.Productid)"
          >
            <van-image
              width="0.7rem"
              height="0.7rem"
              :src="'apis/kuan_api/ProductImg/'+message.ProductImg"
              fit="contain"
            />{{message.ProductName}}
          </van-tag>
        </div>
      </div>
    </van-skeleton>
    <hr class="hr">
    <van-tabs
      v-model="active"
      swipeable
      class="mokuai"
    >
      <van-tab title="点赞">
        <div
          class="like_box"
          v-if="this.like!=''"
        >
          <div
            class="like"
            v-for="l in like"
            :key="l.id"
          >
            <van-row>
              <van-col span="3">
                <van-image
                  width="1.0rem"
                  height="1.0rem"
                  :src="'apis/kuan_api/photo/'+l.user_img"
                  round
                />
              </van-col>
              <van-col span="12">
                <p style="margin:5px;height:30px;line-height:30px">{{l.user_nickname}}</p>
              </van-col>
            </van-row>
          </div>
        </div>
      </van-tab>
      <van-tab title="评论">
        <!-- 评论区 -->
        <div
          class="box"
          v-if="this.loading!=null"
        >
          <div
            v-for="item in loading"
            :key="item.id"
            class="loading_box"
          >
            <van-row>
              <van-col span="3">
                <van-image
                  height="1.0rem"
                  width="1.0rem"
                  :src="'apis/kuan_api/photo/'+item.user_img"
                  round
                  @click="look(item.user_id)"
                />
              </van-col>
              <van-col span="21">
                <p class="nickname">{{item.user_nickname?item.user_nickname:item.user_name}} <van-tag
                    type="success"
                    plain
                    v-if="message.user_id==item.user_id"
                    style="margin-left:5px"
                  >楼主</van-tag>
                </p>
                <p class="geshi">{{item.content}}</p>
                <p class="geshi">{{item.CreateDate}}</p>
              </van-col>
            </van-row>
          </div>
        </div>
      </van-tab>
      <van-tab title="转发">
        点赞
      </van-tab>
    </van-tabs>

    <van-action-sheet
      v-model="show"
      class="ActionSheet "
    >
      <div>
        <van-field
          v-model="huifu"
          type="textarea"
          rows="4"
          autosize
          placeholder="写回复"
          maxlength="50"
          show-word-limit
        />
        <div style="text-align:right;margin:15px">
          <van-button
            type="primary"
            size="small"
            @click="sendPl"
          >发送</van-button>
        </div>
      </div>
    </van-action-sheet>
    <!-- 底部回复 -->
    <div class="foot_cls">
      <van-row>
        <van-col span="12">
          <van-cell-group inset>
            <van-field
              v-model="huifu"
              left-icon="edit"
              placeholder="写回复"
              @click="show = true"
            />
          </van-cell-group>
        </van-col>
        <van-col
          span="3"
          class="icon"
        >
          <van-icon name="comment-o" /><span
            class="badge"
            v-if="this.loading!=null"
          >{{loading.length}}</span>
          <span
            class="badge"
            v-else
          >0</span>
        </van-col>
        <van-col
          span="3"
          class="icon"
        >
          <van-icon name="good-job-o" />
        </van-col>
        <van-col
          span="3"
          class="icon"
        >
          <van-icon name="star-o" />
        </van-col>
        <van-col
          span="3"
          class="icon"
        >
          <van-icon name="share-o" />
        </van-col>
      </van-row>
    </div>

  </div>
</template>

<script>
export default {
  nmae: "detail",
  data() {
    return {
      active: 1,
      message: [],
      show: false,
      message_id: "",
      huifu: "",
      loading: null,
      isattention: false,
      attentionid: "",
      jiazai: true,
      like: [],
    };
  },
  methods: {
    // 返回上一级
    onClickLeft() {
      window.history.go(-1);
    },
    // 获取动态内容
    getmessage() {
      this.axios
        .post("apis/kuan_api/Detail.php", {
          id: this.message_id,
        })
        .then((res) => {
          if (res.data.errorCode == "1") {
            this.message = res.data.message[0];
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    // 获取评论
    getloading() {
      this.axios
        .post("apis/kuan_api/loading.php", {
          AddCode: 0,
          dongtaiId: this.message_id,
        })
        .then((res) => {
          this.loading = res.data.loading;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    // 获取点赞列表
    getlike() {
      this.axios
        .post("apis/kuan_api/Like.php", {
          code: 0,
          messageID: this.message_id,
        })
        .then((res) => {
          console.log(res.data.like);
          this.like = res.data.like;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    // 获取关注列表
    getattention() {
      this.axios
        .post("apis/kuan_api/Attention.php", {
          attention_id: this.$store.state.user.user_id,
          Code: 0,
        })
        .then((res) => {
          res.data.attention.forEach((element) => {
            if (this.message.user_id == element.Attention_id) {
              this.isattention = true;
              this.attentionid = element.id;
            }
          });
        });
    },
    // 关注按钮
    Isattention() {
      // 取消关注
      if (this.isattention) {
        console.log(this.attentionid);
        this.$dialog
          .confirm({
            message: "你确定要取消关注吗？",
          })
          .then(() => {
            this.axios
              .post("apis/kuan_api/Attention.php", {
                id: this.attentionid,
                Code: 3,
              })
              .then((res) => {
                this.isattention = false;
                this.getattention();
              });
          });
      }
      // 关注
      else {
        this.axios
          .post("apis/kuan_api/Attention.php", {
            attention_id: this.message.user_id,
            user_id: this.$store.state.user.user_id,
            Code: 2,
          })
          .then((res) => {
            this.getattention();
          });
      }
    },
    // 发送评论
    sendPl() {
      if (this.$store.state.user.user_id == undefined) {
        this.$dialog
          .confirm({
            title: "提示",
            message: "当前还未登录",
          })
          .then(() => {
            this.$router.push("/login");
          });
      } else {
        this.axios
          .post("apis/kuan_api/loading.php", {
            userid: this.$store.state.user.user_id,
            dongtaiId: this.message_id,
            content: this.huifu,
            AddCode: 1,
          })
          .then((res) => {
            if (res.data.errorCode == 1) {
              this.$toast.success("评论成功");
              this.huifu = "";
              this.show = false;
              this.getloading();
            }
          })
          .catch((err) => {
            console.error(err);
          });
      }
    },
    look(id) {
      this.$router.push({
        path: "/userdetail",
        query: {
          userid: id,
        },
      });
    },

    tomodule(id) {
      this.$router.push({
        path: "/module",
        query: { productid: id },
      });
    },
  },
  created() {
    setTimeout(() => {
      this.jiazai = false;
    }, 500);
    this.$store.state.fullpath = JSON.parse(sessionStorage.getItem("fullpath"));
    this.message_id = JSON.parse(sessionStorage.getItem("message_id"));
    this.getmessage();
    this.getloading();
    this.getlike();
    if (this.$store.state.user != "") {
      // 获取关注列表
      this.getattention();
    }
  },
};
</script>

<style scoped>
.nick {
  font-size: 13px;
  margin: 8px;
}
.user {
  margin-top: 15px;
}
.btn {
  width: 75px;
  height: 30px;
  margin-top: 10px;
}
.btn_att {
  width: 75px;
  height: 30px;
  margin-top: 10px;
  background-color: rgb(224, 222, 222);
}
.content {
  width: 90%;
  margin: 0 auto;
}
.message {
  font-weight: 500;
  font-size: 15px;
}
.icon {
  line-height: 44px;
  font-size: 18px;
}
.foot_cls {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
}
.loading_box {
  width: 90%;
  margin: 0px auto;
  margin-bottom: 20px;
}
.nickname {
  color: rgb(80, 183, 80);
  padding-left: 1px;
  margin: 0;
}
.geshi {
  margin: 5px 0px;
}
.hr {
  background-color: lightgray;
  border: 0px;
  height: 10px;
}
.ActionSheet {
  height: 220px;
  margin-bottom: 40px;
}
.badge {
  font-size: 12px;
  padding-left: 3px;
}
.like_box {
  width: 90%;
  margin: 0 auto;
}
.like {
  margin-top: 15px;
}
</style>